<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>就餐预约</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/diancan.css" /> 
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/mui.picker.min.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
			<h1 class="mui-title">就餐预约</h1>
		</header>
		<div class="mui-content" style="background: white;">
			<form id="form" class="mui-input-group ddyy_list">
				<div class="mui-input-row">
					<label>预订人：</label>
					<input type="text" id="name"  value="{$Think.session.user_info.user_name}" placeholder="预订人" readonly="readonly">
				</div>
				<div class="mui-input-row">
					<label>联系电话：</label>
					<input type="text" id="phone" value="{$Think.session.user_info.mobile}" class="mui-input-group" placeholder="联系电话" readonly="readonly">
				</div>
				<div class="mui-input-row">
					<label>就餐人数：</label>
					<div class="mui-numbox">
						<button class="mui-btn mui-btn-numbox-minus" onclick="change_num()" type="button">-</button>
						<input class="mui-input-numbox" id="room_num" type="number" value="1">
						<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
				<div class="mui-input-row start_btn" data-options='{"type":"datetime"}'>
					<label>就餐日期：</label>
					<input id='start_time' name='start_time' type='text' placeholder="选择就餐日期" class="form-control layer-date" />
				</div>
				<div class="mui-input-row end_btn" data-options='{"type":"time"}'>
					<label>到店时间：</label>
					<input id='dd_time' name='dd_time' type='text' placeholder="选择到店时间" class="form-control layer-date" />
				</div>
				<div class="mui-input-row">
					<label>是否需要包房：</label>
					<div class="mui-switch mui-switch-blue ">
						<div class="mui-switch-handle"></div>
					</div>
					<span></span>
				</div>
			</form>
			<div class="dcyy_tip"><textarea id="message" placeholder="备注信息"></textarea></div>
			<div class="dcyy_btn"><button type="button" onclick="diancai()" class="mui-btn mui-btn-danger">确认操作</button></div>

		</div> 
		<input type="hidden" id="need_house" value="0"/>
		<input type="hidden" id="store_id" value="{$store_id}"/>
	</body>

</html> 
{include file="public/footer" /}
{include file="public/bind_phone" /}
<script src="__INDEX__/js/mui.picker.min.js"></script>
<script src="__INDEX__/js/jquery.js"></script>
<script type="text/javascript"> 
	mui.init({
        //禁用mui tap监听 否则点击生日选择会弹出两次
        gestureConfig:{
            tap:false
        }
    });
    (function($) {
		$.init();
		var btns = $('.start_btn');
		var btns2 = $('.end_btn');

		//就餐时间
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) { 
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 */
					jQuery("#start_time").val(rs); //赋值选择的日期
					/* 
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 */
					/*
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					_self.picker.dispose();
					_self.picker = null; 
				});
			}, false);
		});
		
		//到店时间
		btns2.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) { 
					jQuery("#dd_time").val(rs); //赋值选择的日期
					_self.picker.dispose();
					_self.picker = null; 
				});
			}, false);
		}); 
	})(mui);
	
	function change_num() {
		var value = $("#room_num").val();
		if(value <= 0) {
			$("#room_num").val(1);
		}
	}
	mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	mui('.mui-switch').each(function() { //循环所有toggle
		this.addEventListener('toggle', function(event) {
			//event.detail.isActive 可直接获取当前状态
			var checked = this.classList.contains('mui-active') ? '1' : '0'; 
			$("#need_house").val(checked);
		});
	});

	function diancai() { 
		var start_time = $("#start_time").val();
		var dd_time = $("#dd_time").val();
		if(start_time == "") {
			mui.toast("请选择就餐日期");
			return false;
		} 
		if(dd_time == "") {
			mui.toast("请选择到店日期");
			return false;
		} 
		var data = {};
		data['jc_time'] = start_time;
		data['dd_time'] = dd_time; 
		data['room_num'] = $("#room_num").val(); 
		data['message'] = $("#message").val();
		data['is_rooms'] = $("#need_house").val();
		data['store_id'] = $("#store_id").val();
		$.ajax({
			url: "{:url('index/index/yuyue')}",
			data: { 
				data: data
			},
			type: "post",
			success: function(res) { 
                if(res == 1) { 
                    mui.toast(res.msg); 
                } else {
                    location.href="/index/member/reserve_ct";
                    mui.toast(res.msg);
                }
			}
		})

	}
</script>